<template>
  <div class="m-content" v-loading="is_loading">
      <p class="u-nav">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>直播列表</el-breadcrumb-item>
        </el-breadcrumb>
      </p>


      <div class="u-container">
        <el-row>
          <el-col :span="8">
            <div class="ds_box ds_add" @click="dialogFormVisible = true">
              <i class="el-icon-plus"></i>
            </div>
          </el-col>


            <el-col :span="8" v-for="(item,index) in  tableData">
              <div class="ds_box">
                  <div class="ds_handle">
                      <el-switch
                        v-model="tableData[index].ds_id"
                        active-color="#13ce66"
                        inactive-color="#ccc">
                      </el-switch>
                      <div class="el-handle">
                        <span class="el-icon-setting" @click="update_ds(index)"></span>
                      </div>
                  </div>

                  <div class="u-main clearfix">
                      <div class="avatar">
                        <img style="width: 100%;" v-bind:src=item.coverpic>
                      </div>

                    <div class="top-info">
                        <p class="u-title">{{item.name}}</p>
                        <p>开始时间：{{item.start_time}}</p>
                        <p>直播状态：
                          <span v-if="item.direct_status=='not_started'">直播未开始</span>
                          <span v-if="item.direct_status=='stop'">直播停止</span>
                          <span v-if="item.direct_status=='end'">直播结束</span>
                          <span v-if="item.direct_status=='runing'">正在直播</span>
                        </p>
                        <p>观看人次：0</p>
                    </div>
                  </div>

                  <div class="u-operate">
                      <ul>
                        <li class="items">频道装修</li>
                        <li class="items">数据统计</li>
                        <li class="items">电脑预览</li>
                        <li class="items">手机预览</li>
                      </ul>
                  </div>
              </div>
            </el-col>




        </el-row>

        <div class="u-pages">
          <div class="block">
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              :page-size="15"
              layout="prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </div>
        </div>

      </div>


    <el-dialog title="新建直播频道" :visible.sync="dialogFormVisible" id="add_screen">
      <el-form :model="form" label-width="120px"  :rules="rules" ref="form">
        <el-form-item label="直播名称" prop="name">
          <el-input v-model="form.name" auto-complete="off" style="width: 388px"></el-input>
        </el-form-item>

        <el-form-item label="直播类型">
           <el-radio v-model="form.type" label="open">公开</el-radio>
           <el-radio v-model="form.type" label="test">测试</el-radio>
        </el-form-item>

        <el-form-item label="频道主题">
          <el-radio v-model="form.style" label="1">通用版</el-radio>
          <el-radio v-model="form.style" label="2">商务版</el-radio>
          <el-radio v-model="form.style" label="3">节日版</el-radio>
        </el-form-item>

        <el-form-item label="直播封面" prop="fid">
            <el-upload
              class="avatar-uploader"
              :action="actionurl"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </el-form-item>


        <el-form-item label="直播时间"  prop="datevalue">
            <el-date-picker style="width: 388px"
              value-format="yyyy-MM-dd HH:mm:ss"
              v-model="form.datevalue"
              type="datetime"
              placeholder="选择日期时间">
            </el-date-picker>
        </el-form-item>

        <el-form-item>

          <el-button type="primary" @click="saveDirectSeeding('form')">保存</el-button>

          <el-button  plain  @click="dialogFormVisible = false">取消</el-button>

        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">

      </div>
    </el-dialog>

  </div>


</template>

<script>

  export default {
    name: 'm-content',
    data:function(){
      return {
        is_loading:false,
        dialogFormVisible: false,
        baseurl:this.$moment.config.baseurl,
        uid:'',
        actionurl:this.$moment.config.baseurl+'common/Upload/index',
        imageUrl:'',
        form:{
          name:'',
          type:'open',
          style:'1',
          fid:'',
          datevalue:'',
        },
        rules:{   //创建直播的验证规则
          name: [
            { required: true, message: '请输入直播名称', trigger: 'blur' },
            { min: 3, max: 32, message: '长度在 3 到 32 个字符', trigger: 'blur' }
          ],
          coverfid:[
            { required: true, message: '请上传直播封面', trigger: 'blur' },
          ],
          datevalue:[
            { required: true, message: '请选择直播时间', trigger: 'blur' },
          ]
        },
        tableData: [],
        currentPage:1,
        total:0,
        on_off:'直播关闭',
      };
    },
    methods: {

      //上传图片封面成功后调用
      handleAvatarSuccess(res, file) {

        if(res.code==200){

          this.form.fid=res.data.fid;

          this.imageUrl = URL.createObjectURL(file.raw);

        }else{
          this.$message({
            message: res.body.msg,
            type: 'error'
          });
        }
      },
      beforeAvatarUpload(file) {

        const isJPG = file.type;


        const isLt2M = file.size / 1024 / 1024 < 2;

        if (isJPG!='image/jpeg'&&isJPG!='image/png'&&isJPG!='image/gif'&&isJPG!='image/jpg') {

            this.$message.error('只能上传图片格式');

        }
        if (!isLt2M) {
          this.$message.error('封面图片不能超过2M');
        }
        return isJPG && isLt2M;
      },
     saveDirectSeeding(formName){

       this.$refs[formName].validate((valid) => {
         if (valid) {
           var postdata={};

           postdata.name=this.form.name;  //直播主题名
           postdata.type=this.form.type;  //直播类型
           postdata.style=this.form.style;  //直播类型
           postdata.fid=this.form.fid;  //直播封面ID
           postdata.uid=this.uid;  //商户UID


           if(this.form.datevalue!=''&&this.form.datevalue!=null){
             postdata.start_time=this.form.datevalue;  //直播类型
           }

           this.is_loading=true

           this.$http.post(this.baseurl+'directSeeding/index/add' ,postdata,{credentials : true,emulateJSON:true}).then(function(res){


             this.is_loading=false

             if(res.status==200){
               if(res.body.code==200){

                 this.$notify({
                   title: '成功',
                   message: '新建直播成功！',
                   type: 'success'
                 });


                 this.dialogFormVisible = false
                 //把新建直播表单置为空
                 this.$refs['form'].resetFields();

               }else{
                 this.$message({
                   message: res.body.message,
                   type: 'error'
                 });
               }
             }else {

               this.$message({
                 message: '网络请求错误，请刷新后重试！',
                 type: 'error'
               });
             }


           });

         }
       });
     },

    handleCurrentChange:function(val){
      this.is_loading=false;
      var data={};
      data.page=val;
      this.get_userlist(data);
    },
     //请求列表数据
      ge_dstlist(postdata){


        this.$http.post(this.baseurl+'directSeeding/index/lists' ,postdata,{credentials : true,emulateJSON:true}).then(function(res){

          if(res.status==200){

            if(res.body.code==200){




              this.total=res.body.data.count;

              this.tableData=res.body.data.list;
              this.is_loading=false;

            }else{
              this.$message({
                message: res.body.msg,
                type: 'error'
              });
            }

          }else {

            this.$message({
              message: '网络请求错误，请刷新后重试！',
              type: 'error'
            });
          }


        });

      },

      //修改直播数据
      update_ds:function(index){



        this.dialogFormVisible = true

        this.$refs['form'].resetFields();

      }
    },
    created: function () {
        var that = this;

        //初始化登录的回调函数
        that.$moment.initlogin(this,function (res) {
          that.uid=res.data.uid;
        });

      //请求直播列表数据
      var data={};
      data.page=1;
      that.ge_dstlist(data);
    },



  }
</script>


<style>

  html{
    font-size: 20px;
  }

  .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}

  .m-content{
    margin: 15px;
    min-width: 800px;
  }
  .el-dialog{
    min-width: 555px;
  }
  .el-select{
    width: 100%;
  }
  .ds_box{
    margin: 0 5%;
    border: 1px solid #eee;
    transition: .3s all linear;
    border-radius: 3px;
    padding: 0;
    min-width: 350px;
    width: 90%;
  }
  .ds_add{
    height: 11rem;
    display: inline-block;
    text-align: center;
    font-size: 3rem;
    cursor: pointer;
    line-height: 11rem;
  }
  .u-container{
    margin-top: 39px;
    padding: 15px;
    padding-top: 35px;
    background: #fff;
    box-shadow: 0 0 20px 0 rgba(0,0,0,.05);
    color: #409eff;
  }
  .ds_box:hover{
    box-shadow: 0px 0px 8px 0px rgba(7, 17, 27, 0.3);
  }

  #add_screen .el-dialog__header{
      background: #409EFF;
  }
  #add_screen .el-dialog__close{
    color: #fff;
  }
  #add_screen .el-dialog__title{
    color: #fff;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .el-col-8{
    margin-bottom: 1rem;
  }
  .u-pages{
    margin-top: 20px;
    text-align: right;
  }
  .ds_handle{
    text-align: right;
    margin: 0;
    height: 2rem;
    line-height: 2rem;
    border-bottom: 1px solid #f9f9f9;
    padding: 0 0.5rem;
  }
  .ds_box .u-main{
    margin-top: 1rem;
    height: 5rem;
    padding: 0 0.5rem;
  }
  .el-handle{

    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    line-height: 20px;
    height: 20px;
    vertical-align: middle;
  }
  .ds_box .avatar {
    float: left;
    position: relative;
    width: 100px;
    height: 100px;
    overflow: hidden;
  }
  .ds_box .top-info {
    margin-left: 1rem;
    display: inline-block;
    color: #969696;
    height: 72px;
    font-size: 14px;
  }
  .ds_box .top-info p{
    margin: 0;
    padding: 0;
    margin-bottom: 0.3rem;
  }
  .ds_box .top-info .u-title{
      margin: 0;
      padding: 0;
      color:#409EFF;
      font-size: 18px;
      font-weight: 600;
      margin-bottom:  0.3rem;
  }
  .ds_box .u-operate{
    margin-top: 1rem;
    height: 2rem;
    line-height: 2rem;
    background: #f9f9f9;
  }
  .ds_box .u-operate ul{
    padding: 0;
    margin: 0;
  }
  .ds_box .u-operate .items{
    position: relative;
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 25%;
    font-size: 14px;
    color: #606266;
    text-align: center;
    float: left;
  }
</style>
